<template>
    <!--大屏-->
	<div class="container">
		<el-row :gutter="10">
			<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" style="height: 100%;">
				<el-row class="kongqi">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="top">
						<span>本周空气质量情态分析</span>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-row style="padding: 10px 10px 0px 0px;color: #1bcfbc;">
							<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"><h3>SO2</h3></el-col>
							<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"><h3>CO2</h3></el-col>
							<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"><h3>O3</h3></el-col>
							<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"><h3>PM2.5</h3></el-col>
						</el-row>
						<el-row>
							<so2co2></so2co2>
						</el-row>
					</el-col>
				</el-row>
					<el-row class="" style="height:12rem;margin:  10px -20px 5px 20px; background: #183052;color: #fff;">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="top">
						<span>综合污染源集中分析</span>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-row style="padding: 11px 10px 0px 0px;color: #1bcfbc; font-family:'华文行楷';">
							<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8"><h4>气环境</h4></el-col>
							<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8"><h4>声环境</h4></el-col>
							<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8"><h4>水环境</h4></el-col>
						</el-row>
						<el-row>
							<wordCloud></wordCloud>
						</el-row>
					</el-col>
				</el-row>
			</el-col>
		    <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
		    	<baidu></baidu>
		        <bar3D></bar3D>
		    </el-col>
		    <el-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5">
		    		<el-row class="" style="height: 6.25rem !important; margin: 15px 15px 5px 30px; background: #183052; color: #FFFFFF;">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="top">
						<span>土地监察情况</span>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-row style="padding: 10px 10px 0px 0px;color: #1bcfbc;">
							<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
								<h6>工业污水</h6>
								<h2>14%</h2>
							</el-col>
							<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
								<h6>化肥污染</h6>
								<h2>58%</h2>
							</el-col>
							<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
								<h6>废气污染</h6>
								<h2>6%</h2>
							</el-col>
							<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
								<h6>积物污染</h6>
								<h2>22.0%</h2>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
				<el-row style="height:100%; margin: 10px 15px 5px 30px !important; background: #183052;">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="">
					<qingjian></qingjian>
					</el-col>
				</el-row>
				<el-row style="height:100%;margin: 10px 15px 5px 30px  !important; background: #183052;">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="">
						<jindu></jindu>
					</el-col>
				</el-row>
				<el-row style="height:100%;margin: 7px 15px 5px 30px  !important; background: #183052;">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="">
						<barShuiping></barShuiping>
					</el-col>
				</el-row>
		    </el-col>
	    </el-row>
	    <el-row :gutter="10">
	    	<el-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5" style="height: 100%; margin: -30px 0px 5px 20px;">
	    		<custom></custom>
	    	</el-col>
	    	<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" style="height: 100%; margin: -30px 0px 5px 0px;">
	    		<line2></line2>
	    	</el-col>
	    	<el-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5" style="height: 100%; margin: -30px 0px 5px 0px;">
	    		<world></world>
	    	</el-col>
	    	<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" style="height: 100%; margin: -30px 0px 5px 0px;">
	    		<graph2></graph2>
	    	</el-col>
	    	<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="height: 100%; margin: -30px 0px 5px -20px;padding-left: 30px;">
	    		<pmSOCO></pmSOCO>
	    	</el-col>
	    </el-row>
	</div>
</template>

<script>
	import bigger from '@/views/echarts/map-parallel-prices.vue';
	import earth from '@/views/echarts/earth.vue'
    import so2co2 from '@/views/echarts/so2_co2.vue'
    import baidu from '@/views/echarts/baidu_guangzhou.vue'
    import bar3D from '@/views/echarts/bar3D.vue'
    import qingjian from '@/views/echarts/qingjian.vue'
    import jindu from '@/views/echarts/jindu.vue'
    import barShuiping from '@/views/echarts/bar_shuiping.vue'
    import wordCloud from '@/views/echarts/wordCloud.vue'
    import pmSOCO from '@/views/echarts/pmSOCO.vue'
    import custom from '@/views/echarts/custom.vue'
    import world from '@/views/echarts/world.vue'
    import line2 from '@/views/echarts/line.vue'
    import graph2 from '@/views/echarts/graph.vue'
    export default {
	name: "bigger_data",
	data() {
		return {
            height:''
		}
	},
	components: {
		bigger,
		earth,		
		so2co2,
		qingjian,
		baidu,
		bar3D,
		jindu,
		barShuiping,
		wordCloud,
		pmSOCO,
		custom,
		world,
		line2,
		graph2
	},
	mounted() {
		this.resizeElementHeight();
	},
	methods: {
		 resizeElementHeight() {
			this.height=window.innerHeight+'px';
			}
	}
}
</script>

<style scoped="scoped">
	.container{
		width:100%;
		height: 100%;
		/*background: #404a59;*/
		background: url(../assets/xing_bg.jpg);
		background-size: 100% 100%;
	}
	.kongqi{
		height: 22rem;
		background: #183052;
		color: #fff;
		margin: 15px -20px 5px 20px;
		}
	.top{
		height: 35px;
		width: 100%;
		line-height: 35px;
		text-align: left;
		padding-left: 10px;
		font-size: 1.1rem;
		font-family:'华文行楷';
		background: #24486b;
	}
	h2{
		font-family:'华文行楷';
		color: #fff;
		padding-top: 10px;
	}
	h6{font-family:'华文行楷';}
</style>